<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="">
    <title>Document</title>
</head>
<script src="./../../js//cssLoader.js"></script>
<body>
    <div class="layout-flex m-b-24">
        <span>输入值1</span>
        <input type="number" oninput="valueChange1(this.value)"/>
    </div>
    <div class="layout-flex">
        <span>输入值2</span>
        <input type="number"  oninput="valueChange2(this.value)" />
    </div>
    <div class="layout-flex">
        <span>结果</span>
        <input type="number" disabled id="result" />
    </div>
</body>
<script>
    const getTotal = (value1, value2) => {
        document.getElementById('result').value = (value1.value || 0) + (value2.value || 0);
    };

    const createProxy = () => {
        return  new Proxy({}, {
            get: (val) => {
                return val;
            },
            set: (obj, handleKey, newValue) => {
                obj[handleKey] = newValue;
                getTotal(value1.value, value2.value)
            }
        })
    }
    const value1 = createProxy();
    const value2 = createProxy();

    const valueChange1 = (val) => {
        console.log('change', typeof val);
        value1.value = Number(val);
    }

    const valueChange2 = (val) => {
        console.log('2-change', val);
        value2.value = Number(val);
    }
</script>
</html>